<style lang="less">
@import "../../styles/common.less";
.wiki-card {
  padding: 8px;
  box-sizing: border-box;
}
.wiki-select-type .ivu-select-selection{
    border: 0;
    background: transparent;
    box-shadow: none;
    &:focus, &:active{
        outline: none;
        box-shadow: none;
    }
}
</style>

<template>
    <div class="">
        <Row>
            <div style="padding: 12px 8px; display: flex;">
                <Input  placeholder="搜索知识库"/>
                <Button type="primary" style="width: 80px; margin-left: 16px">搜索</Button>
                <Select v-model="type" style="position: absolute; right: 100px; top: 12px; border: none; width: 80px;" class="wiki-select-type">
                    <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>
        </Row>
        <Row>
            <Col :sm="24" :md="12" :lg="8" class="wiki-card">
                <Card>
                    <div slot="title" style="display: flex; justify-content: space-between; align-items: center;">
                        <h4><a href="#/wiki-detail/IPv6">IPv6</a></h4>
                        <Icon style="margin-left: 4px; cursor: pointer" type="star" color="gold" :size="20"></Icon>
                    </div>
                    <div style="padding: 0 8px">IPv6是Internet Protocol Version 6的缩写，其中Internet Protocol译为“互联网协议”。IPv6是IETF（互联网工程任务组，Internet Engineering Task Force）设计的用于替代现行版本IP协议（IPv4）的下一代IP协议，号称可以为全世界的每一粒沙子编上一个网址。由于IPv4最大的问题在于网络地址资源有限，严重制约了互联网的应用和发展。IPv6的使用，不仅能解决网络地址资源数量的问题，而且也解决了多种接入设备连入互联网的障碍 。</div>
                </Card>
            </Col>
            <Col :sm="24" :md="12" :lg="8" class="wiki-card">
                <Card>
                    <div slot="title" style="display: flex; justify-content: space-between; align-items: center;">
                        <h4><a href="#/wiki-detail/IPv6">IPv6</a></h4>
                        <Icon style="margin-left: 4px; cursor: pointer" type="star" color="gold" :size="20"></Icon>
                    </div>
                    <div style="padding: 0 8px">IPv6是Internet Protocol Version 6的缩写，其中Internet Protocol译为“互联网协议”。IPv6是IETF（互联网工程任务组，Internet Engineering Task Force）设计的用于替代现行版本IP协议（IPv4）的下一代IP协议，号称可以为全世界的每一粒沙子编上一个网址。由于IPv4最大的问题在于网络地址资源有限，严重制约了互联网的应用和发展。IPv6的使用，不仅能解决网络地址资源数量的问题，而且也解决了多种接入设备连入互联网的障碍 。</div>
                </Card>
            </Col>
            <Col :sm="24" :md="12" :lg="8" class="wiki-card">
                <Card>
                    <div slot="title" style="display: flex; justify-content: space-between; align-items: center;">
                        <h4><a href="#/wiki-detail/IPv6">IPv6</a></h4>
                        <Icon style="margin-left: 4px; cursor: pointer" type="star" color="gold" :size="20"></Icon>
                    </div>
                    <div style="padding: 0 8px">IPv6是Internet Protocol Version 6的缩写，其中Internet Protocol译为“互联网协议”。IPv6是IETF（互联网工程任务组，Internet Engineering Task Force）设计的用于替代现行版本IP协议（IPv4）的下一代IP协议，号称可以为全世界的每一粒沙子编上一个网址。由于IPv4最大的问题在于网络地址资源有限，严重制约了互联网的应用和发展。IPv6的使用，不仅能解决网络地址资源数量的问题，而且也解决了多种接入设备连入互联网的障碍 。</div>
                </Card>
            </Col>
            <Col :sm="24" :md="12" :lg="8" class="wiki-card">
                <Card>
                    <div slot="title" style="display: flex; justify-content: space-between; align-items: center;">
                        <h4><a href="#/wiki-detail/IPv6">IPv6</a></h4>
                        <Icon style="margin-left: 4px; cursor: pointer" type="star" color="gold" :size="20"></Icon>
                    </div>
                    <div style="padding: 0 8px">IPv6是Internet Protocol Version 6的缩写，其中Internet Protocol译为“互联网协议”。IPv6是IETF（互联网工程任务组，Internet Engineering Task Force）设计的用于替代现行版本IP协议（IPv4）的下一代IP协议，号称可以为全世界的每一粒沙子编上一个网址。由于IPv4最大的问题在于网络地址资源有限，严重制约了互联网的应用和发展。IPv6的使用，不仅能解决网络地址资源数量的问题，而且也解决了多种接入设备连入互联网的障碍 。</div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  name: "access_index",
  data() {
    return {
      type: "all",
      typeList: [
        { value: "all", label: "全部" },
        { value: "network", label: "网络" },
        { value: "SHELL", label: "SHELL" }
      ]
    };
  },
  computed: {},
  methods: {}
};
</script>

<style>

</style>
